<template>
  <div>
    <ul class="pagination">
      <li><span  :class="PreButton.class" class="pageButton" @click="toPrev"> Prev </span></li>
    <li v-for="index of total" :key="index">
          <a class="pageNumber page" :class="{active: cur_page == index}">{{ index }}</a>
      </li>
      <li><span  :class="NextButton.class" class="pageButton" @click="toNext"> Next </span></li>
    </ul>
  </div>
</template>

<script>
import { ref, computed, reactive } from "vue";

export default {
  name: "KPagination",
  props: ["total", "page_size", "cur_page"],
  emits : ["update:cur_page"],
  setup(props, ctx) {
    let total = ref(5);
    // TODO : 有时间可以完善一下page_size，它代表同一时刻最多显示的标签数
    let page_size = ref(5);
    let cur_page = ref(1);
    if (props.total !== undefined) total.value = props.total;
    if (props.page_size !== undefined) page_size.value = props.page_size;
    if (props.cur_page !== undefined) cur_page.value = props.cur_page;

    let PreButton = reactive({
        class : computed(() => {
            if (cur_page.value == 1)
                return "button disabled"
            else
                return "button"
        }),

    })
    
    let NextButton = reactive({
        class : computed(() => {
            if (cur_page.value == total.value)
                return "button disabled"
            else
                return "button"
        }),
    })

    function toPrev() {
      cur_page.value --
      ctx.emit("update:cur_page", cur_page.value)
    }

    function toNext() {
      cur_page.value ++
      ctx.emit("update:cur_page", cur_page.value)
    }

    return {
      total,
      page_size,
      cur_page,
      PreButton,
      NextButton,
      toPrev,
      toNext
    };
  },
};
</script>

<style>

.pageNumber {
    font-size: 18px !important;
}

.pageButton {
    font-size: 14px;
}

</style>